<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/axios.js"></script>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app" style="text-align: center; ">
  <table border="1" style="margin:auto; width:450px;">
    <tr>
      <th>编号</th>
      <th>名称</th>
      <th>sal</th>
      <th>操作</th>
    </tr>
    <tr v-for='item in empList'>
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.sal}}</td>
      <td>
        <a href="" @click.prevent='deleteEmp(item.id)'>删除</a>
      </td>
    </tr>
  </table>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      empList: []
    },
    methods:{
      deleteEmp(p) {
        axios.delete(
                '/emp/emps',{params:{id:p}}
        ).then(result=>{
                  if (result.data.success) {
                    axios.get(
                            '/emp/emps'
                    ).then(rs => {
                      this.empList = rs.data.data;
                    });
                  }
                }
        );
      }
    },
    mounted(){
      axios.get(
              '/emp/emps'
      ).then(rs => {
        if(rs.data.success){
          this.empList = rs.data.data;
        }
      });
    }
  });
</script>
</body>
</html>